<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>捕获所有路由</title>
</head>

<body>
  <div id="app">
    <router-link to='/welcome'>欢迎词</router-link>
    <router-link to='/emp-add'>新增员工</router-link>
    <router-link to='/emp-query'>查询员工</router-link>
    <router-link to='/emp-xx'>删除员工</router-link>
    <hr>
    <h1>
      <router-view></router-view>
    </h1>
  </div>
  <script src="../js/vue.js"></script>
  <script src="../js/vue-router.js"></script>
  <script>
    let Welcome = {
      template: `<div>欢迎使用本系统</div>`
    }
    let NotFount = {
      template: `<div>抱歉，页面没有找到</div>`
    }
    let Emp = {
      template: `<div>员工组件</div>`
    }

    let routes = [{
        path: '/welcome',
        component: Welcome
      },
      { //通过emp-query/emp-add/emp-edit/emp-xx都能访问该组件
        path: '/emp-*',
        component: Emp
      },
      {
        path: '/',
        component: Welcome
      },
      {
        //必须放到底部，不然从上往下拦截
        // 路由列表的匹配模式，是自上到下逐个匹配，匹配到了就行
        // 推荐：把带匹配符的路径都进行放到后面
        path: '/*',
        component: NotFount
      },
    ]

    let router = new VueRouter({
      routes
    })

    let vm = new Vue({
      el: '#app',
      data: {

      },
      router
    })
  </script>
</body>

</html>